<template>
  <div class="rootContainer">
    <div class="perceptionItem">
      <div class="perceptionContext">
        <div class="title">
          <div class="leftTitle"><img src="../../img/rectangle.png" alt="" />组件情况</div>
          <div class="right">组件数量：<span class="num">636</span><span class="unit">个</span></div>
        </div>
        <div class="btns">
          <div :class="{ active: componentActive === 0, btn: true }" @click="changeComponent(0)">上线情况</div>
          <div :class="{ active: componentActive === 1, btn: true }" @click="changeComponent(1)">消费情况</div>
        </div>
        <div class="component" id="component"></div>
      </div>
    </div>
    <div class="perceptionItem">
      <div class="perceptionContext">
        <div class="title">
          <div class="leftTitle"><img src="../../img/rectangle.png" alt="" />感知资源</div>
          <div class="right">
            感知资源数量：<span class="num">{{ resourcesData.toolNum }}</span
            ><span class="unit">个</span>
          </div>
        </div>
        <div class="btns">
          <div :class="{ active: resourcesActive === 0, btn: true }" @click="changeResources(0)">视频设备</div>
          <div :class="{ active: resourcesActive === 1, btn: true }" @click="changeResources(1)">物联设备</div>
        </div>
        <div class="resources" id="resources"></div>
      </div>
    </div>
    <Dialog :visible="DialogConfig.visible" dataChange="4" @close="DialogConfig.visible = false" :title="DialogConfig.title">
      <div class="dialogContext">
        <div class="charts"><MapCharts /></div>
        <div class="tableContext">
          <Table
            :currentPage="tableOptions.currentPage"
            :pageSize="tableOptions.pageSize"
            :columns="tableOptions.columns"
            :total="tableOptions.total"
            :tableData="tableOptions.tableData"
            @pageSizeChange="pageSizeChange"
            @currentChange="currentChange"
            @queryTableData="queryTableData"
          />
        </div>
      </div>
    </Dialog>
    <!-- <MapCharts /> -->
  </div>
</template>
<script setup>
import { onMounted, ref, reactive } from "vue";
import * as echarts from "echarts";
import { GETdigitizedNlzjxfxtCountTwo, GETcountUniqueDeviceCode, getCountUniqueDeviceCodeMx, getSpgzzyCountMx } from "@/api/Digitalassets.js";
import Dialog from "../Dialog2.vue";
import MapCharts from "./Mapcharts.vue";
const resourcesActive = ref(0);
// 弹窗配置
const DialogConfig = reactive({
  visible: false,
  title: resourcesActive.value == 0 ? "视频设备" : "物联设备",
});
const componentActive = ref(0);
const changeComponent = (index) => {
  componentActive.value = index;
  if (index === 0) {
    getOnlineData();
  } else {
    getConsumptionData();
  }
};

const getOnlineData = () => {
  componentData.value = {
    legend: ["自有组件", "其他单位组件"],
    xAxis: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月"],
    self: [140, 232, 101, 264, 90, 340, 250, 124, 215],
    other: [120, 282, 111, 234, 220, 340, 310, 264, 90],
  };
  initComponent();
};

const getConsumptionData = async () => {
  try {
    const { data } = await GETdigitizedNlzjxfxtCountTwo(); // 组件消费情况
    const xAxis = [];
    const self = [];
    const other = [];
    data.forEach((item) => {
      xAxis.push(item.month);
      self.push(item.selfCustSys);
      other.push(item.otherCustSys);
    });
    componentData.value = {
      legend: ["自有组件", "其他单位组件"],
      xAxis,
      self,
      other,
    };
  } catch (error) {
    console.error("数字资产一本账-组件&感知-组件消费情况，请求接口报错");
  }
  initComponent();
};

const tableOptions = ref({
  keyword: "",
  currentPage: 1,
  pageSize: 10,
  total: 0,
  columns: [
    {
      prop: "name",
      label: "名称",
    },
    {
      prop: "appName",
      label: "应用名称",
    },
    {
      prop: "belongCounty",
      label: "所属区县",
    },
    {
      prop: "deviceType",
      label: "设备类别",
    },
    {
      prop: "deviceState",
      label: "设备状态",
    },
  ],
  tableData: [],
});

const pageSizeChange = (val) => {
  tableOptions.value.pageSize = val;
  if (resourcesActive.value === 0) {
    getVideoData(tableOptions.value.currentPage, tableOptions.value.pageSize);
  } else {
    getDeviceData(tableOptions.value.currentPage, tableOptions.value.pageSize);
  }
};

const currentChange = (val) => {
  tableOptions.value.currentPage = val;
  if (resourcesActive.value === 0) {
    getVideoData(val, tableOptions.value.pageSize);
  } else {
    getDeviceData(val, tableOptions.value.pageSize);
  }
};

const queryTableData = (val) => {
  // TODO: 模糊查询，接口未做
  tableOptions.value.currentPage = 1;
  tableOptions.keyword = val;
  if (resourcesActive.value === 0) {
    getVideoData(1, tableOptions.value.pageSize);
  } else {
    getDeviceData(1, tableOptions.value.pageSize);
  }
};

const componentData = ref({
  legend: ["自有组件", "其他单位组件"],
  xAxis: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月"],
  self: [140, 232, 101, 264, 90, 340, 250, 124, 215],
  other: [120, 282, 111, 234, 220, 340, 310, 264, 90],
});
const initComponent = () => {
  const chartDom = document.getElementById("component");
  const myChart = echarts.init(chartDom);
  setChartOption(myChart, componentData.value);
};

const changeResources = (index) => {
  resourcesActive.value = index;
  DialogConfig.title = index === 0 ? "视频设备" : "物联设备";
  tableOptions.value.currentPage = 1;
  tableOptions.value.total = 0;
  tableOptions.value.pageSize = 10;
  tableOptions.value.tableData = [];
  if (index === 0) {
    resourcesData.value.echarts = {
      legend: ["在线", "离线"],
      xAxis: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月"],
      self: [140, 232, 101, 264, 90, 340, 250, 124, 215],
      other: [120, 282, 111, 234, 220, 340, 310, 264, 90],
    };
  } else {
    resourcesData.value.echarts = {
      legend: ["在线", "离线"],
      xAxis: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月"],
      self: [140, 250, 124, 215, 232, 101, 264, 90, 340],
      other: [120, 234, 220, 340, 310, 264, 282, 111, 90],
    };
  }
  initResources();
};

const resourcesData = ref({
  toolNum: 0,
  echarts: {
    legend: ["在线", "离线"],
    xAxis: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月"],
    self: [140, 232, 101, 264, 90, 340, 250, 124, 215],
    other: [120, 282, 111, 234, 220, 340, 310, 264, 90],
  },
});
/**
 * 获取感知资源接口数据
 * 真尼玛无语，sx操作，一个echarts数据，n个请求
 */
const getResourcesData = async () => {
  try {
    const {
      data: { count },
    } = await GETcountUniqueDeviceCode();
    resourcesData.value.toolNum = count;
  } catch (error) {
    console.error("数字资产一本账-组件&感知-感知资源，请求错误！");
  } finally {
    initResources();
  }
};
const initResources = () => {
  const chartDom = document.getElementById("resources");
  const myChart = echarts.init(chartDom);
  setChartOption(myChart, resourcesData.value.echarts);
};

const handleChartClick = (params) => {
  const { seriesName, name, value } = params;
  tableOptions.value.keyword = "";
  // 这里可以根据业务需求处理点击事件
  if (["离线", "在线"].includes(seriesName)) {
    if (resourcesActive.value === 0) {
      getVideoData(1, 10);
    } else {
      getDeviceData(1, 10);
    }
    console.log("123456");

    DialogConfig.visible = true;
  }
};

const getDeviceData = async (current, pageSize, keyword = "") => {
  const {
    data: { records: tableData, totalRow },
  } = await getCountUniqueDeviceCodeMx({
    pageNumber: current,
    keyword,
    pageSize,
  });
  tableOptions.value.tableData = tableData;
  tableOptions.value.total = totalRow;
};

const getVideoData = async (current, pageSize, keyword = "") => {
  const {
    data: { records: tableData, totalRow },
  } = await getSpgzzyCountMx({
    pageNumber: current,
    keyword,
    pageSize,
  });
  const tdata = tableData.map((item) => {
    return {
      name: item.column4,
      appName: item.column2,
      belongCounty: item.column3,
      deviceType: item.column5,
      deviceState: item.column6,
    };
  });
  tableOptions.value.tableData = tdata;
  tableOptions.value.total = totalRow;
};

const setChartOption = (chart, data) => {
  chart.setOption({
    color: ["#37A7E8", "#FDC11E"],
    tooltip: {
      trigger: "axis",
      backgroundColor: "#2869E9",
      borderColor: "#2869E9",
      textStyle: {
        color: "#fff",
      },
    },
    legend: {
      right: 0,
      icon: "circle",
      data: data.legend,
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      top: "22%",
      bottom: "20%",
      textStyle: {
        color: "#fff",
      },
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 25,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          color: "#fff",
        },
        data: data.xAxis,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "数量",
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
        },
        axisLabel: {
          color: "#fff",
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: data.legend[0],
        type: "line",
        stack: "Ad",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: true,
        symbolSize: 6,
        emphasis: {
          scale: true,
          focus: "series",
          itemStyle: {
            borderWidth: 2,
            borderColor: "#fff",
            shadowBlur: 10,
            shadowColor: "rgba(255,255,255,0.5)",
          },
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#A77E0F",
            },
            {
              offset: 1,
              color: "#73550300",
            },
          ]),
        },
        data: data.self,
      },
      {
        name: data.legend[1],
        type: "line",
        stack: "Ad",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: true,
        symbolSize: 6,
        emphasis: {
          scale: true,
          focus: "series",
          itemStyle: {
            borderWidth: 2,
            borderColor: "#fff",
            shadowBlur: 10,
            shadowColor: "rgba(255,255,255,0.5)",
          },
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#0368FF",
            },
            {
              offset: 1,
              color: "#84A7FF00",
            },
          ]),
        },
        data: data.other,
      },
    ],
  });

  // 添加点击事件监听
  chart.off("click"); // 先移除之前的点击事件
  chart.on("click", handleChartClick);
};

onMounted(() => {
  initComponent();
  getResourcesData();
});
const props = defineProps({
  undigitizedCounts: {
    type: Array,
    required: true,
    default: () => [100, 200, 30, 110, 100, 120, 120],
  },
});
</script>
<style lang="scss" scoped>
.rootContainer {
  display: flex;
  margin-top: 10px;
  justify-content: space-between;

  .perceptionItem {
    width: 508px;
    height: 230px;
    background-image: url("../../img/perceptionBg.png");

    .perceptionContext {
      padding: 10px;

      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: Alimama ShuHeiTi;
        font-weight: 700;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 10%;
        text-transform: uppercase;

        .leftTitle {
          display: flex;
          align-items: center;

          img {
            width: 8px;
            height: 8px;
            margin-right: 12px;
          }
        }

        .right {
          .num {
            font-family: DINPro;
            font-weight: 700;
            font-size: 20px;
            line-height: 100%;
            letter-spacing: 0px;
            margin-left: 12px;
            color: #37c9c9;
          }

          .unit {
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 14px;
            line-height: 100%;
            letter-spacing: 0px;
            text-align: right;
            color: #37c9c9;
            margin-left: 6px;
          }
        }
      }

      .btns {
        margin-left: 20px;
        margin-top: 10px;
        display: flex;
        width: 180px;
        align-items: center;
        justify-content: space-between;

        .btn {
          width: 80px;
          height: 28px;
          line-height: 28px;
          margin-left: 5px;
          color: #cfeaff;
          font-size: 14px;
          background-color: rgba(11, 44, 106, 0.8);
          border: 1px solid #204aac;
          border-radius: 4px;
          text-align: center;
          cursor: pointer;
        }

        .active {
          color: #fff;
          background-color: #103985;
          border-color: #0e63e3;
        }
      }

      .component {
        width: 480px;
        height: 143px;
      }

      .resources {
        width: 480px;
        height: 143px;
      }
    }
  }
}

.dialogContext {
  display: flex;

  .charts {
    width: 500px;
    height: 500px;
  }

  .tableContext {
    flex: 1;
    height: 500px;
  }
}
</style>
